<template>
  <a-modal
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :title="null"
    :footer="null"
    class="hz-modal"
    :closable="false"
    :wrap-class-name="[isFullscreen ? 'full-modal' : '']"
  >
      <div class="right-top-box">
            <span>
              <FullscreenExitOutlined v-if="isFullscreen" @click="onFullscreenToggle" />
              <FullscreenOutlined v-else @click="onFullscreenToggle" />
            </span>
            <span>
              <CloseOutlined @click="handleCancel" />
            </span>
      </div>
    <slot name="header">
    </slot>
    <a-spin :spinning="loading">
      <slot name="body"></slot>
      <slot name="footer"></slot>
    </a-spin>
  </a-modal>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { CloseOutlined, FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  name: 'HzModal',
  components: {
    CloseOutlined, FullscreenOutlined, FullscreenExitOutlined
  },
  props: {
    width: {
      type: Number,
      default: '800px'
    },
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    // 定义Modal确认按钮的点击事件处理函数
    const handleOk = () => {
      emit('ok')
    }

    // 定义Modal取消按钮的点击事件处理函数
    const handleCancel = () => {
      emit('cancel')
    }
    const onFullscreenToggle = () => {
      isFullscreen.value = !isFullscreen.value
    }

    const isFullscreen = ref(false)

    return {
      handleOk,
      handleCancel,
      isFullscreen,
      onFullscreenToggle
    }
  }
})
</script>

<style lang="less">
.right-top-box {
  width: 100px;
  height: 100px;
  position: absolute;
  right: -32px;
  top: 12px;
  display: flex;
  gap: 12px;
}

.full-modal {
  overflow: hidden !important;
  width: 100vw;
  .ant-modal {
    width: 100vw !important;
    top: 0;
    margin: 0;
    padding-bottom: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
  }

  .ant-modal-body {
    flex: 1;
    overflow: hidden !important;
  }
}
</style>
